<template>
  <div class="Classlist-panel-table">
    <div>
      <img src="@/assets/img/other/icon-学生列表.png" class="img-Classlist-table" /><span
        class="Classlist-span-table">学生列表</span>
    </div>
    <div class="Classlist-panel-tablenumber">
      <el-table :data="State.ClassStudentAllArr" style="width:100%" height="97.6%" v-loading="State.Loading">
        <el-table-column prop="name" label="姓名" min-width="28%">
        </el-table-column>
        <el-table-column prop="phoneNumber" label="手机号" min-width="28%"></el-table-column>
        <el-table-column prop="major" label="专业" min-width="28%">
        </el-table-column>
        <el-table-column fixed="right" prop="option" label="操作" min-width="16%">
          <template #default="scope">
            <el-button class="Classlist-tablenumber-button-delete"
              @click="DeleteClick(scope.row, scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 删除任务对话框 -->
    <DialogComponents :DialogComponent="DeleteDialogComponent" @click="DeleteSimulationTasks"></DialogComponents>
  </div>
</template>

<script>
import { defineComponent, reactive, toRef, toRefs, watch, ref } from "vue";
import bus from "@/bus.js";
import { postData } from "@/assets/js/pubilcs.js";
import DialogComponents from "@/components/compon/DialogComponents.vue";
export default defineComponent({
  name: "TeacherTaskStudentList",
  components: {
    DialogComponents
  },
  props: {
    ClassStudentAllArr: {
      type: Array,
      default: "",
    },
  },

  setup(props) {
    let State = reactive({
      ClassStudentAllArr: [],
      Loading: true
    })
    watch(() => props.ClassStudentAllArr, (val, old) => {
      State.CompetitionDetailsArr = val
      State.Loading = false
    },
      { deep: true }
    )
    //删除实训任务数据
    let DeleteDialogComponent = reactive({
      Dialogboolean: false,
      Msg: "是否删除此学生",
      Speanstyles: {

      },
      Buttonstyle: {
        background: '#BF3434'
      },
      Buttonname: "确定",
    })
    let userId = ref()
    let classId = ref()

    bus.$off('classid')
    //不同组件传值,接收班级id
    bus.$on('classid', (data) => {
      classId.value = data
      console.log(data, '++++++++++++++++++++');
      console.log('classId.value', classId.value);
    })

    function DeleteClick(row, index) {
      DeleteDialogComponent.Dialogboolean = true
      userId.value = row.id
      console.log('userId.value', userId.value);
      console.log('classId.value', classId.value);
    }
    function DeleteSimulationTasks(fn) {
      if (fn === 'Cancel') {
        DeleteDialogComponent.Dialogboolean = false
      }
      if (fn === 'Ready') {
        postData("/api/CourseManage/Exit", JSON.stringify({ UserId: userId.value, Id: classId.value }), sessionStorage.getItem("token"))
          .then(function (res) {
            console.log('res', res);
          })
        // 删除成功之后重新获取班级学生详情数据
        setTimeout(() => {
        let ProductId = sessionStorage.getItem("productId")
        postData("/api/User/GetUsersByCourseId", JSON.stringify({ courseId: classId.value, productId: ProductId }), sessionStorage.getItem("token")).
          then(function (rep) {
            console.log('删除成功之后重新获取班级学生详情数据', rep);
            State.ClassStudentAllArr = rep.result.result.userGroup
          })
        }, 300);

        DeleteDialogComponent.Dialogboolean = false
      }
    }
    watch(() => props.ClassStudentAllArr, (val, old) => {
      State.ClassStudentAllArr = val
    },
      { deep: true }
    )
    return {
      State,
      DeleteClick,
      DeleteDialogComponent,
      DeleteSimulationTasks
    };
  },
});
</script>
<style lang="less">
/* 表格位置 */
.Classlist-panel-tablenumber {
  position: absolute;
  width: 717px;
  height: calc(100% - 100px);
  left: 20px;
  top: 60px;
}

/* 表格大小*/
.Classlist-panel-table {
  position: absolute;
  width: 780px;
  height: calc(100% - 290px);
  left: 1100px;
  top: 280px;
  background: #ffffff;
  border-radius: 16px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}

/*图片设置*/
.img-Classlist-table {
  position: absolute;
  width: 24px;
  height: 24px;
  left: 19px;
  top: 19px;
}

/* 表格里面span设置 */
.Classlist-span-table {
  position: absolute;
  left: 0px;
  top: 18px;
  width: 180px;
  height: 18px;
  font-size: 18px;
  color: #81859c;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859c;
}

/* 弹出框的宽高度 */
.Classlist-panel-tablenumber .el-dialog {
  width: 640px;
  height: 700px;
}

/* 子元素居中 */
.Classlist-panel-tablenumber .dialog-footer {
  text-align: center;
}

.dialog-footer {
  margin-top: 5%;
}

/* 表格数据居中 */
.Classlist-panel-tablenumber .cell {
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}

.Classlist-panel-tablenumber .styles {
  width: 38px;
  height: 19px;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #617cd7;
  line-height: 56px;
}

.el-table th {
  width: 38px;
  height: 19px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #617cd7;
  line-height: 20px;
}

.Classlist-panel-tablenumber .Classlist-tablenumber-button-delete {
  width: 80px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #E6E7EBFF;
}

.Classlist-panel-tablenumber .el-button:hover {
  background: #bf3434;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}

/* 表格里面滚动条设置 */
.Classlist-panel-tablenumber .el-table__body-wrapper::-webkit-scrollbar {
  width: 7px;
  background-color: #f5f5f5;
}

/* 表格里面滚动条设置 */
.Classlist-panel-tablenumber .el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px rgba(230, 232, 236, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}

/* 表格里面滚动条设置 */
.Classlist-panel-tablenumber .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 1.5px rgba(0, 0, 0, 0.2);
  background-color: #f5f5f5;
}
</style>
